<template>
 	<view class="container">
		<view class="tabs" :style="{'top': navHeight + 'px'}">
			<u-tabs :list="titleList" :scrollable="false" :current="current" @click="tabClick" lineColor="#f95a51" :activeStyle="{color: '#f95a51'}"></u-tabs>
		</view>
 		<view class="discountPop" v-if="ticketList.length">
 			<view v-for="(row,index) in ticketList" :key="index" @click="goUse(row)" style="display: flex;flex-direction: row;background-color: #FFF;align-items: center;padding: 12rpx 0;position: relative;
			background-color: #fffbf2;margin-top: 16rpx;">
				<!-- <image v-if="item.status=='wait_use'" style="position: absolute;width: 100%;height: 100%;z-index: -1;" src="https://oss.qly.plus/qly_admin_web/2022/12/9/lwWgazLcaX3.png" mode=""></image>
				<image v-if="item.status=='has_use'" style="position: absolute;width: 100%;height: 100%;z-index: -1;" src="https://oss.qly.plus/qly_admin_web/2022/12/9/zLWkg93GLc3.png" mode=""></image>
				<image v-if="item.status=='due'" style="position: absolute;width: 100%;height: 100%;z-index: -1;" src="https://oss.qly.plus/qly_admin_web/2022/12/9/r7xpXeot7U3.png" mode=""></image>
				<div style="z-index: 99;padding-top: 20rpx;width: 450rpx;">
					<div style="margin-left: 20rpx;font-size: 37rpx;font-weight: bold;color: #FFFFFF;limitLineNumOfOne">{{item.name}}</div>
					<div style="margin-left: 20rpx;font-size: 26rpx;color: #FFFFFF;">核销码ID：{{item.code}}</div>
					<div style="margin-left: 20rpx;font-size: 24rpx;color: #FFFFFF;limitLineNumOfTwo">内容：{{item.content}}</div>
					<div style="margin-left: 20rpx;margin-top: 2rpx;font-size: 24rpx;color: #FFFFFF;">生效时间：{{ $time.dateFormat('yyyy-mm-dd HH:MM:SS', item.startTime) }}</div>
					<div style="margin-left: 20rpx;margin-top: 2rpx;font-size: 24rpx;color: #FFFFFF;">截止时间：{{ $time.dateFormat('yyyy-mm-dd HH:MM:SS', item.endTime) }}</div>
				</div> -->
				<view style="width: 240rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;">
					<template v-if="row.types == '1'">
						<view style="font-size: 40rpx;color: #fe9808;">1次</view>
						<view style="font-size: 22rpx;color: #fe9808;margin-top: 14rpx;">免费兑换</view>
					</template>
					<template v-if="row.types == '2'">
						<view style="font-size: 40rpx;color: #fe9808;">¥{{$count.mul(row.money, 1)}}</view>
						<view style="font-size: 22rpx;color: #fe9808;margin-top: 14rpx;">无门槛券</view>
					</template>
					<template v-if="row.types == '4'">
						<view style="font-size: 40rpx;color: #fe9808;">¥{{$count.mul(row.money, 1)}}</view>
						<view style="font-size: 22rpx;color: #fe9808;margin-top: 14rpx;">满{{$count.mul(row.fullMoney, 1)}}元可用</view>
					</template>
				</view>
				<view class="center" style="width: 490rpx;">
					<view  style="display: flex;flex-direction: row;align-items: center;;margin-top: 12rpx;">
						<view style="width: 80rpx;height: 34rpx;border-radius: 17rpx;text-align: center;line-height: 34rpx;font-size: 20rpx;color: #FFF;background-color: #fe9808;">{{row.typesLabel}}</view>
						<view style="margin-left: 12rpx;">{{row.name}}</view>
					</view>
					<view style="display: flex;flex-direction: row;margin-top: 10rpx;">
						<text style="color: #999;font-size: 24rpx;">{{row.lesseeModel.name}}</text>
					</view>
					<view style="display: flex;flex-direction: row;;margin-top: 10rpx;align-items: center;justify-content: space-between;">
						<view style="font-size: 24rpx;color: 999;">
							<view style="color: #999;font-size: 24rpx;">{{$time.dateFormat('yyyy.mm.dd', row.startTime)}} - {{$time.dateFormat('yyyy.mm.dd', row.endTime)}}</view>
							<view class=""><text style="color: #999;font-size: 24rpx;">{{row.weeksLabel}},{{row.timesLabel}}可用</text></view>
						</view>
						<view style="width: 150rpx;height: 56rpx;border-radius: 38rpx;text-align: center;line-height: 56rpx;font-size: 26rpx;color: #FFF; background-color: #fe9808;"
						v-if="row.status == 'wait_use'">立即使用</view>
						<view style="width: 150rpx;height: 56rpx;border-radius: 38rpx;text-align: center;line-height: 56rpx;font-size: 26rpx;color: #FFF; background-color: #999;"
						v-if="row.status == 'has_use'">已使用</view>
						<view style="width: 150rpx;height: 56rpx;border-radius: 38rpx;text-align: center;line-height: 56rpx;font-size: 26rpx;color: #FFF; background-color: #fe9808;"
						v-if="row.status == 'due'">已过期</view>
					</view>
				</view>
 			</view>
 		</view>
 		<view v-if="!ticketList.length"
 			style="height: 70vh;display: flex;align-items: center;justify-content: center;">
 			暂无包券噢！
 		</view>
 	</view>
 </template>

 <script>
	import { coupon } from "@/api/coupon.js"
 	export default {
 		data() {
 			return {
				titleList: [{name: '待使用'}, {name: '已使用',},{name: '已过期',}],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				statusList: ['wait_use', 'has_use', 'due'],
 				ticketList: [],
				userInfo: {},
				userCartId: ''
 			}
 		},
 		onShow() {
			if(this.$Route.query.userCartId){
				this.userCartId = this.$Route.query.userCartId
			}
			this.userInfo = this.$storage.getStorageDataSync(this.$store.state.userInfo)
 			this.findTicketList()
 		},
 		methods: {
			tabClick(item){
				this.current = item.index;
				this.page = 1
				this.findTicketList()
			},
			goUse(item){
				if(item.status == 'wait_use'){
					var params = {
						lesseeId: item.lessee,
						couponId: item.id
					}
					this.$Router.push({
						name: 'qrCode',
						params: params
					})
				}
			},
			findTicketList(){
				var status = this.statusList[this.current]
				coupon.getCouponListForUserCart({
					status: status,
					userCartId: this.userCartId
				}).then(res => {
					if (res.data.code == 10000) {
						this.ticketList = res.data.data.list
						
					}
				})
			},
			
 		}
 	}
 </script>

 <style scoped lang="scss">
	.container{
		background-color: #FFF;
	}
 </style>
